<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<button class="btn btn-floating fixed-action-btn modal-trigger" data-target="modal1"><i class="material-icons">menu</i></button>

<!-- Modal Structure -->
<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>A bunch of text</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
  </div>
</div>


<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal2">Modal</a>

<!-- Modal Structure -->
<div id="modal2" class="modal modal-fixed-footer">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>A bunch of text</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Agree</a>
  </div>
</div>


  <!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal3">Modal</a>

<!-- Modal Structure -->
<div id="modal3" class="modal bottom-sheet">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>A bunch of text</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
  </div>
</div>
